import React from "react";
import { Button, notification, Alert, Skeleton, Spin} from 'antd';
import { SmileOutlined } from '@ant-design/icons';
import { Component } from "react";
import { DailyWorkStatistic } from "../dailyworkstatistic.jsx";
import SecurityWorkRank from "../securityworkrank.jsx";
import StatisticAnalysis from "../statisticanalysis.jsx";
import "../../../css/bigscreen/nbigscreen.css"
import DangerDistribute from "../dangerdistribute.jsx";
import MapStatistic from "../mapstatistic.jsx";
import SchoolSecurity from "../schoolsecurity.jsx";
import { Notice } from "../notice.jsx";
import { SecurityTrend } from "../securitytrend.jsx";
import { SchoolRank } from "../schoolrank.jsx";
import { formatTime } from "../../../js/bigscreen/time"
import { education } from "../../../js/bigscreen/education";
import { compareSecretAndExpireTimeApi, getScreenSecretApi} from "../../../js/bigscreen/api.js";


class MunicipalityPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            timer: "",
            title: "",
            statistic: { totalpatrolnum: 0, totaldangernum: 0, totalinspectnum: 0 },
            schoolNum: 0,
            gridNum: 0,
            schoolGridNumOfPeople: 0,
            schoolGridOutNumOfPeople: 0,
            secret: this.props.match.params.secret,
            isShow: false,
            isTip: true
        }
    }

    componentDidMount() {
        // 调用绍兴市大屏接口
        if(sessionStorage.getItem("departmentId") == undefined){
            sessionStorage.setItem("departmentId", 1)
            sessionStorage.setItem("departmentName", "绍兴市教育局")
            sessionStorage.setItem("schoolLevel", "区教育局")
            sessionStorage.setItem("departmentType", "教育局")
        }
        require("../../../js/bigscreen/flexible");
        this.getTime();
        this.getTitle();
        compareSecretAndExpireTimeApi(this.state.secret).then((res) => {
            if (res.data == 'success') {
                this.setState({
                    isShow: true
                })
            }else{
                this.setState({
                    isTip:false
                })
            }
        })
    }

    componentWillUnmount() {
        clearInterval(this.state.timer)
    }

    getTitle = () => {
        console.log(sessionStorage.getItem("departmentId"))
        this.setState({
            title: education[sessionStorage.getItem("departmentId")].name
        })
    }

    getTime = () => {
        this.state.timer = setInterval(() => {
            var dateYear = formatTime(new Date(), 'yyyy年MM月dd日');
            var dateDay = formatTime(new Date(), 'HH:mm:ss');
            this.setState({
                timeStr: dateYear + " " + dateDay
            });
        }, 1000);
    }

    shareStatistic(statistic) {
        this.setState({
            statistic: statistic
        })
    }
    shareGridNum(girdNum) {
        this.setState({
            gridNum: girdNum
        })
    }
    shareschoolGridNumOfPeople(schoolGridNumOfPeople) {
        this.setState({
            schoolGridNumOfPeople: schoolGridNumOfPeople
        })
    }
    shareschoolGridOutNumOfPeople(schoolGridOutNumOfPeople) {
        this.setState({
            schoolGridOutNumOfPeople: schoolGridOutNumOfPeople
        })
    }
    shareschoolNum(schoolNum) {
        this.setState({
            schoolNum: schoolNum
        })
    }
    // redirect = () => {
    //     let name = "浙江工业大学"
    //     let key = "123456"
    //     getScreenSecretApi(name, key).then((res) => {
    //         let url = 'http://localhost:3000/edubigscreen/' + res.data ;
    //         window.location.href = url ;
    //     })
    // }


    render() {
        return (
            <div className="bigscreen_bg">
                <div className="border">
                    <div className="title">
                        <span>{this.state.title}师生安全网格</span>
                    </div>
                    <div className="time">
                      <span>{this.state.timeStr}</span> 
                    </div>
                    {
                        this.state.isShow ?
                            <div className="leftM">
                                <StatisticAnalysis name="昨日统计"></StatisticAnalysis>
                                <SecurityWorkRank name="本月各区县安全工作排名" type="1" position="left" position1="mid"></SecurityWorkRank>
                                <DailyWorkStatistic></DailyWorkStatistic>
                            </div> : null
                    }
                    {
                        this.state.isShow ?
                            <div className="middleM">
                                <MapStatistic statistic={this.shareStatistic.bind(this)} gridNum={this.shareGridNum.bind(this)}
                                    schoolGridNumOfPeople={this.shareschoolGridNumOfPeople.bind(this)} schoolNum={this.shareschoolNum.bind(this)}
                                    schoolGridOutNumOfPeople={this.shareschoolGridOutNumOfPeople.bind(this)}></MapStatistic>
                                <div className="midbottom">
                                    <DangerDistribute></DangerDistribute>
                                    <SchoolSecurity></SchoolSecurity>
                                </div>
                            </div> : 
                            <div>
                                {
                                    this.state.isTip ? null :
                                    <div className="invalidTip">
                                      {/* <div>大屏链接已失效,请<a onClick={this.redirect}>重新进入</a>大屏!</div> */}
                                      <div>大屏链接已失效,请重新进入大屏!</div>
                                   </div>
                                }
                            </div>
                            
                    }
                    {
                        this.state.isShow ?
                            <div className="rightM">
                                <Notice statistic={this.state.statistic} gridNum={this.state.gridNum} schoolGridNumOfPeople={this.state.schoolGridNumOfPeople}
                                    schoolNum={this.state.schoolNum} schoolGridOutNumOfPeople={this.state.schoolGridOutNumOfPeople}></Notice>
                                <SecurityTrend></SecurityTrend>
                                <SchoolRank></SchoolRank>
                            </div>
                            : null
                    }
                </div>
            </div>
        )
    }
}

export { MunicipalityPage }